async function func() {
  // 获取首页数据
  const res = await axios({
    url: "/dashboard",
  })
  const { overview, year, salaryData, groupData, provinceData } = res.data
  //   渲染顶部数据
  for (const key in overview) {
    // 通过key生成选择器获取dom元素并设置内容
    // 对象[key]动态的获取指定的属性值
    document.querySelector(`[name=${key}]`).innerHTML = overview[key]
  }

  // ------------- 年度薪资分布 -------------
  function yearSalary(year) {
    // 基于准备好的dom元素，初始化echarts实例
    const myChart = echarts.init(document.querySelector("#line"))
    // 获取月
    const months = year.map(v => v.month)
    // 获取薪资
    const salarys = year.map(v => v.salary)

    // 指定图表的配置项和数据
    const option = {
      // 标题
      title: {
        text: "2021年全学科薪资走势",
      },
      // X轴的样式
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: months,
        // 线段
        axisLine: {
          // 线的样式
          lineStyle: {
            // 颜色
            color: "greenyellow",
            type: "dashed",
          },
        },
      },
      // 提示框
      tooltip: {},
      yAxis: {
        type: "value",
        // 分割线
        splitLine: {
          show: true, //显示
          // 线的样式
          lineStyle: {
            color: ["#d6d6d6"], //颜色
            type: "dashed", //类型
          },
        },
      },
      // 绘图网络
      grid: {
        left: 66,
      },
      // 图形颜色
      color: ["#608cff"],
      series: [
        {
          data: salarys,
          // 平滑曲线
          smooth: true,
          type: "line",
          // 标记的大小
          symbolSize: 10,
          // 线段的样式
          lineStyle: {
            width: 5,
          },
          // 区域的样式
          areaStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "red", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "blue", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
      ],
    }

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
  }
  yearSalary(year)

  // ------------- 班级薪资分布 ------------- )
  function classSalary(salaryData) {
    // 基于准备好的dom元素，初始化echarts实例
    const myChart = echarts.init(document.querySelector("#salary"))
    // 指定图表的配置项和数据
    const option = {
      // 标题
      title: {
        tetx: "班级薪资分布",
      },
      tooltip: {
        trigger: "item",
      },
      // 图例
      legend: {
        bottom: "30", //底部的间隙
        left: "center", //居中
      },
      // 调色盘
      color: ["#fda224", "#5097ff", "#3fceff", "#34d39a", "yellow"],
      series: [
        // 数据
        {
          name: "Access From",
          type: "pie",
          // 内外圆半径
          radius: ["55%", "70%"],
          avoidLabelOverlap: false,
          itemStyle: {
            // 区域间隔圆形倒角
            borderRadius: 40,
            borderColor: "#fff",
            borderWidth: 2,
          },
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "40",
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          // 老数组转新数组
          data: salaryData.map(v => {
            return {
              value: v.g_count + v.b_count,
              name: v.label,
            }
          }),
        },
      ],
    }

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
  }
  classSalary(salaryData)

  // ------------- 每组薪资分布 ------------- )
  function grouSalary(groupData) {
    // 基于准备好的dom元素，初始化echarts实例
    const myChart = echarts.init(document.querySelector("#lines"))
    // 指定图表的配置项和数据
    const option = {
      xAxis: {
        type: "category",
        // 轴线
        axisLine: {
          // 样式
          lineStyle: {
            // 虚线
            type: "dashed",
            // 颜色
            color: "#bebebe",
          },
        },
        data: groupData[1].map(v => v.name),
      },
      // 提示框
      tooltip: {},
      // 颜色
      color: [
        {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#65dcb2", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#d2f0e7", // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
        {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#4a9fed", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#d6e7f6", // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
      ],
      // y轴
      yAxis: {
        type: "value",
        // 分割线
        splitLine: {
          // 样式
          lineStyle: {
            // 虚线
            type: "dashed",
          },
        },
      },
      // 绘图网格
      grid: {
        left: 40,
        right: 40,
      },
      series: [
        // 多个图表
        {
          data: groupData[1].map(v => v.hope_salary),
          type: "bar",
        },
        {
          data: groupData[1].map(v => v.salary),
          type: "bar",
        },
      ],
    }

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)

    // ------------- 点击高亮 ------------- )
    document.querySelectorAll("#btns button").forEach(item => {
      item.addEventListener("click", function () {
        // 移除其他所有的高亮类名
        document.querySelector(".btn-blue").classList.remove("btn-blue")
        // 给自己添加高亮类名
        this.classList.add("btn-blue")

        // 更新数据
        const index = this.innerHTML.trim()
        // console.log("index:", index)
        const data = groupData[index]
        // console.log("data:", data)
        // 更新x轴的数据
        option.xAxis.data = data.map(v => v.name)
        // 两个柱形图的数据
        option.series[0].data = data.map(v => v.hope_salary)
        option.series[1].data = data.map(v => v.salary)

        myChart.setOption(option)
      })
    })
  }
  grouSalary(groupData)

  // ------------- 男女薪资分布 ------------- )
  function bgSalary(salaryData) {
    const myChart = echarts.init(document.querySelector("#gender"))

    // 指定图表的配置项和数据
    const option = {
      title: [
        {
          text: "男女薪资分布",
        },
        {
          text: "男生",
          left: "center",
          top: "48%",
          textStyle: {
            fontSize: "15",
          },
        },
        {
          text: "女生",
          left: "center",
          top: "88%",
          textStyle: {
            fontSize: "15",
          },
        },
      ],
      tooltip: {
        trigger: "item",
      },
      // 颜色
      color: ["#fda224", "#5097ff", "#3abcfa", "#34d39a"],
      series: [
        {
          name: "Access From",
          type: "pie",
          // 内外半径
          radius: ["20%", "30%"],
          // 位置
          center: ["50%", "30%"],
          // 男生数据
          data: salaryData.map(v => {
            return {
              value: v.b_count,
              name: v.label,
            }
          }),
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
        {
          name: "Access From",
          type: "pie",
          radius: ["20%", "30%"],
          center: ["50%", "70%"],
          // 女生数据
          data: salaryData.map(v => {
            return {
              value: v.g_count,
              name: v.label,
            }
          }),

          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    }

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
  }
  bgSalary(salaryData)

  // ------------- 地域省份分布 -------------
  function initMapChart(provinceData) {
    // 基于dom元素 初始化ECharts
    const myEchart = echarts.init(document.querySelector("#map"))

    // 地域数据
    // 基于服务器的数据 筛选出要的
    // 赋值给对应的项 find includes
    const dataList = [
      { name: "南海诸岛", value: 0 },
      { name: "北京", value: 0 },
      { name: "天津", value: 0 },
      { name: "上海", value: 0 },
      { name: "重庆", value: 0 },
      { name: "河北", value: 0 },
      { name: "河南", value: 0 },
      { name: "云南", value: 0 },
      { name: "辽宁", value: 0 },
      { name: "黑龙江", value: 0 },
      { name: "湖南", value: 0 },
      { name: "安徽", value: 0 },
      { name: "山东", value: 0 },
      { name: "新疆", value: 0 },
      { name: "江苏", value: 0 },
      { name: "浙江", value: 0 },
      { name: "江西", value: 0 },
      { name: "湖北", value: 0 },
      { name: "广西", value: 0 },
      { name: "甘肃", value: 0 },
      { name: "山西", value: 0 },
      { name: "内蒙古", value: 0 },
      { name: "陕西", value: 0 },
      { name: "吉林", value: 0 },
      { name: "福建", value: 0 },
      { name: "贵州", value: 0 },
      { name: "广东", value: 0 },
      { name: "青海", value: 0 },
      { name: "西藏", value: 0 },
      { name: "四川", value: 0 },
      { name: "宁夏", value: 0 },
      { name: "海南", value: 0 },
      { name: "台湾", value: 0 },
      { name: "香港", value: 0 },
      { name: "澳门", value: 0 },
    ]

    // 循环 及查找
    // dataList.forEach(v => {
    //   const res = provinceData.find(pv => {
    //     // 找到 名字开头部分相同的元素
    //     if (pv.name.includes(v.name)) {
    //       return true
    //     } else {
    //       return false
    //     }
    //   })
    //   // 检索之后的结果
    //   // 找到了对应的那个元素
    //   if (res !== undefined) {
    //     v.value = res.value
    //   }
    // })
    // 简化版本
    dataList.forEach(v => {
      // 找到 名字开头部分相同的元素
      const res = provinceData.find(pv => pv.name.includes(v.name))
      // 检索之后的结果
      // 找到了对应的那个元素之后 赋值value属性
      // 逻辑短路 表达式1 && 表达式2 表达式1为真才会解析表达式2
      res && (v.value = res.value)
    })
    console.log("dataList:", dataList)

    let option = {
      title: {
        text: "籍贯分布",
        top: 10,
        left: 10,
        textStyle: {
          fontSize: 16,
        },
      },
      tooltip: {
        trigger: "item",
        formatter: "{b}: {c} 位学员",
        borderColor: "transparent",
        backgroundColor: "rgba(0,0,0,0.5)",
        textStyle: {
          color: "#fff",
        },
      },
      visualMap: {
        min: 0,
        max: 6,
        left: "left",
        bottom: "20",
        text: ["12", "0"],
        inRange: {
          color: ["#ffffff", "#0075F0"],
        },
        show: true,
        left: 40,
      },
      geo: {
        map: "china",
        roam: false,
        zoom: 1.0,
        label: {
          normal: {
            show: true,
            fontSize: "10",
            color: "rgba(0,0,0,0.7)",
          },
        },
        itemStyle: {
          normal: {
            borderColor: "rgba(0, 0, 0, 0.2)",
            color: "#e0ffff",
          },
          emphasis: {
            areaColor: "#34D39A",
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowBlur: 20,
            borderWidth: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
      series: [
        {
          name: "籍贯分布",
          type: "map",
          geoIndex: 0,
          data: dataList,
        },
      ],
    }

    // 基于选项 生成图表
    myEchart.setOption(option)
  }

  initMapChart(provinceData)
}
// 调用
func()
